<template>
  <div>
    <div v-for="item in courseData">
      <h4>{{ item.courseGroup.name }}</h4>
      <el-row>
        <div v-for="item in allCourse">
          <el-col :span="8">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span> {{ item.course.name }}</span>
                    <el-button style="float: right; padding: 3px 0" type="text">{{item.course.type}}</el-button>
                </div>
              <img class="img-course" src="" />

            </el-card></el-col
          >
        </div>
      </el-row>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import axios from 'axios';

const url = require(`../config/config`).dev.localurl;
export default {
    name: `homecourses`,
    data() {
        return {
            courseData: ``,
            allCourse: ``,
            uniqueOpened:true
        };
    },
    props: [],
    created() {
        axios({
            url: url + `/getHomepageInfo`,
            method: `get`
        }).then((res) => {
            this.courseData = res.data.data;

            for (let i of this.courseData) {
                this.allCourse = Object.assign(i.keyCourses, i.ordinaryCourse);
            }

        }).catch((res) => {
            console.log(res.message);
        });
    },
    methods: {
        handleOpen() {
        },
        handleClose() {
        }
    }
};
</script>

<style scoped>
.img-course {
  width: 300px;
  height: 240px;
}
</style>
